<template>
	<el-row :gutter="40" class="panel-group">
		<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col" v-for="(item,index) in group" :key="index">
			<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
				<div class="card-panel-icon-wrapper" :class="getIconClass(item.iconClass)">
					<svg-icon icon-class="monitor" class-name="card-panel-icon" />
				</div>
				<div class="card-panel-description">
					<div class="card-panel-text">
						{{item.name}}
					</div>
					<div class="card-panel-num">
						{{item.value}}
					</div>
				</div>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	export default {
		props: {
			group: { //组
				type: Array,
				default: []
			},
		},
		computed: {
			
		},
		data() {
			return {

			}
		},
		methods: {
			getIconClass(val) {
				// 根据传入的 iconClass props 动态返回样式类
				return {
					'icon-total': val === 'icon-total',
					'icon-online': val === 'icon-online',
					'icon-offline': val === 'icon-offline',
					'icon-error': val === 'icon-error'
				};
			},
			handleSetLineChartData(type) {
				this.$emit('handleSetLineChartData', type)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.panel-group {
		margin-top: 18px;

		.card-panel-col {
			margin-bottom: 32px;
		}

		.card-panel {
			height: 108px;
			cursor: pointer;
			font-size: 12px;
			position: relative;
			overflow: hidden;
			color: #666;
			background: #fff;
			box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
			border-color: rgba(0, 0, 0, .05);

			&:hover {
				.card-panel-icon-wrapper {
					color: #fff;
				}

				.icon-total {
					background: #36a3f7;
				}

				.icon-online {
					background: #34bfa3;
				}

				.icon-offline {
					background: #d3d3d3;
				}

				.icon-error {
					background: #f4516c
				}
			}

			.icon-total {
				background: #36a3f7;
			}
			
			.icon-online {
				background: #34bfa3;
			}
			
			.icon-offline {
				background: #d3d3d3;
			}
			
			.icon-error {
				background: #f4516c
			}

			.card-panel-icon-wrapper {
				float: left;
				margin: 14px 0 0 14px;
				padding: 16px;
				transition: all 0.38s ease-out;
				border-radius: 6px;
			}

			.card-panel-icon {
				float: left;
				font-size: 48px;
			}

			.card-panel-description {
				float: right;
				font-weight: bold;
				margin: 26px;
				margin-left: 0px;

				.card-panel-text {
					line-height: 18px;
					color: rgba(0, 0, 0, 0.45);
					font-size: 16px;
					margin-bottom: 12px;
				}

				.card-panel-num {
					font-size: 20px;
				}
			}
		}
	}

	@media (max-width:550px) {
		.card-panel-description {
			display: none;
		}

		.card-panel-icon-wrapper {
			float: none !important;
			width: 100%;
			height: 100%;
			margin: 0 !important;

			.svg-icon {
				display: block;
				margin: 14px auto !important;
				float: none !important;
			}
		}
	}
</style>